<template>
  <div>
    <div class="test-box">
      <div class="test-box-bg">
        <div class="test-content">
          <div class="test-content-title">
          </div>
          <div class="test-sum-wrap">
            <ul class="content-item-list">
              <li class="content-item-unit">
                <div class="item-unit-common item-unit-score">
                  <div class="item-unit-number">{{testData.score}}</div>
                </div>
                <div class="item-unit-text">我的成绩</div>
              </li>
              <li class="content-item-unit">
                <div class="item-unit-common item-unit-avg">
                  <div class="item-unit-number">{{testData.avg}}</div>
                </div>
                <div class="item-unit-text">班级平均分</div>
              </li>
              <li class="content-item-unit">
                <div class="item-unit-common item-unit-recoder" v-if="testData.classlevel==0">
                  <div class="item-unit-text-tip">晚交</div>
                  <!--<div class="item-unit-total">数据</div>-->
                </div>
                <div class="item-unit-common item-unit-recoder" v-else>
                  <div class="item-unit-number">{{testData.classlevel}}</div>
                  <div class="item-unit-total">/{{testData.classtotal}}</div>
                </div>
                <div class="item-unit-text">班级排名</div>
              </li>
              <li class="content-item-unit">
                <div class="item-unit-common item-unit-recoder" v-if="testData.alllevel==0">
                  <div class="item-unit-text-tip">晚交</div>
                </div>
                <div class="item-unit-common item-unit-recoder" v-else>
                  <div class="item-unit-number">{{testData.alllevel}}</div>
                  <div class="item-unit-total">/{{testData.alltotal}}</div>
                </div>
                <div class="item-unit-text">全体排名</div>
              </li>
            </ul>
          </div>
          <div class="content-item-title">
            <div class="item-title-bg">
              <span class="item-class-star item-class-star-left"></span>
              <div class="item-class-type">我的分数</div>
              <span class="item-class-star item-class-star-right"></span>
            </div>
          </div>
          <div class="test-content-item">
            <ul class="test-content-list">
              <li class="test-content-list-unit" v-for="(item,index) in typeData">
                <div class="progress-wrap">
                  <div class="progress-mark-box">
                    <div class="mark-avg-bg" v-bind:style="{marginLeft:(item.avg/item.total*100) +'%'}">
                      <span class="mark-avg-bg-text">平均<b>{{item.avg}}</b></span>
                    </div>
                    <div class="progress-mark-name progress-mark-name-left">{{item.title}}</div>
                  </div>
                  <div class="progress-box">
                    <div class="progress-item-bg">
                      <span class="progress-total-score">总分{{item.total}}</span>
                      <div class="progress-item-active" v-bind:style="{width:(item.mine/item.total * 100) + '%'}">
                        <span v-bind:class="{'progress-active-text-color':(item.mine/item.total * 100) < 30}"
                              class="progress-item-active-text ">我的分数 {{item.mine}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="content-item-title content-item-title-dark">
            <div class="item-title-bg">
              <span class="item-class-star item-class-star-left"></span>
              <div class="item-class-type">我的能力</div>
              <span class="item-class-star item-class-star-right"></span>
            </div>
          </div>
          <!-- 能力测试模块 -->
          <div class="test-ability-box">
            <div v-bind:style="{width:carWidth +'px',height:carWidth * 1.16+'px'}" class="charts-inicate">
              <div id="myChart" v-bind:style="{width:carWidth +'px',height:carWidth * 1.16+'px'}" class="radar-charts"
                   @click="cancelHl">
              </div>
            </div>
            <div class="radar-cart-title">
              <div class="radar-cart-title-type">
                <span class="radar-cart-title-time">全体学员平均能力<i></i></span>
              </div>
              <div class="cart-unit-text">
                <span class="radar-cart-title-ability">我的能力<i></i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['testData', 'typeData', 'abilityData'],
    data () {
      return {
        carWidth: '',
        option: {
          baseOption: {
            tooltip: {
              trigger: 'item',
              formatter: (params, ticket, callback) => {
                let tipData = []
                let nameAll = []
                let str = '<div>' +
                  '<div>' + params.data.name +
                  '</div>'
                for (let i = 0, len = this.nameData.length; i < len; i++) {
                  nameAll.push(this.nameData[i].name)
                  tipData.push(Math.round(params.value[i] / this.nameData[i].max * 100))
                  str += '<div>' + nameAll[i] + ' : ' + tipData[i] + '%'
                  if (i == len - 1) {
                    str += '</div>'
                  }
                }
                return str
              }
            },
            radar: [{
              indicator: [],
              nameGap: 5,
              name: {
                textStyle: {
                  color: '#fff',
                  fontWeight: 600,
                  fontFamily: 'Arial, Helvetica, Microsoft YaHei, PingFang SC',
                  textAlign: 'center',
                  backgroundColor: {
                    image: 'http://res16.xesimg.com/x5home_h5/studentStage/static/img/rado_bg.png'
                  },
                  padding: [12, 5]
                }
              },
              splitArea: {
                areaStyle: {
                  color: ['rgba(253, 142, 0, 0.5)',
                    'rgba(253, 142, 0, 0.4)', 'rgba(253, 142, 0, 0.3)',
                    'rgba(253, 142, 0, 0.2)', 'rgba(253, 142, 0, 0.1)']
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(238, 238, 236, 1)'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'transparent'
                }
              }
            }],
            series: [{
              name: '平均能力 vs 我的能力',
              type: 'radar',
              symbol: 'circle',
              symbolSize: 4,
              itemStyle: {
                normal: {
                  areaStyle: {
                    opacity: 0.2,
                    type: 'default'
                  }
                }
              },
              data: [
                {
                  name: '平均能力',
                  itemStyle: {
                    normal: {
                      lineStyle: {
                        width: 2,
                        borderType: 'solod'
                      },
                      color: 'rgba(255,177,28,1)'
                    }
                  }
                },
                {
                  name: '我的能力',
                  itemStyle: {
                    normal: {
                      lineStyle: {
                        width: 2,
                        borderType: 'solod'
                      },
                      color: 'rgba(220,35,40,1)'
                    }
                  }
                }
              ]
            }]
          },
          media: [  // 这里定义了 media query 的逐条规则。
            {
              query: {
                maxWidth: 320
              },
              option: {
                radar: [{
                  radius: '70%'
                }]
              }
            },
            {
              query: {
                minWidth: 500
              },
              option: {
                radar: [{
                  name: {
                    textStyle: {
                      fontSize: '70%',
                      padding: [12, 5]
                    }
                  }
                }]
              }
            }
          ]
        }
      }
    },
    computed: {
      scoreData () {
        return (this.abilityData.map(item => {
          return item.mine
        }))
      },
      avgData () {
        return (this.abilityData.map(item => {
          return item.avg
        }))
      },
      nameData () {
        return (this.abilityData.map(item => {
          return item.title
        }))
      }
    },
    mounted () {
      this.init()
      window.app = this
    },
    methods: {
      init () {
        this.option.baseOption.series[0].data[0].value = this.avgData
        this.option.baseOption.series[0].data[1].value = this.scoreData
        this.option.baseOption.radar[0].indicator = this.nameData
        this.drawLine()
      },
      cancelHl () {  // 取消高亮，高亮的时候会提升层级问题
        this.$chart.dispatchAction({
          type: 'downplay',
          // 可选，系列 index，可以是一个数组指定多个系列
          seriesIndex: [0, 1]
        })
      },
      drawLine () {
        const chart = this.$chart = this.$echarts.init(document.getElementById('myChart'))
          chart.setOption(this.option)
          this.resize_Handler()
          window.addEventListener('resize', this.resize_Handler)
      },
      resize_Handler () {
        this.carWidth = document.documentElement.clientWidth > 750 ? 750 * 0.812 : document.documentElement.clientWidth * 0.812
        this.$nextTick(() => {
          this.$chart.resize()
        })
      }
    }
  }
</script>

<style type="text/css" scoped>
  .item-unit-text-tip{
    font-size: .44rem;
    line-height: .7rem;
  }
  .radar-cart-title-ability > i {
    display: inline-block;
    vertical-align: middle;
    width: .63rem;
    height: .25rem;
    background-color: rgba(224, 39, 439, .1);
    border: .02rem solid #e02727;
    margin-left: .06rem;
    box-sizing: border-box;
  }

  .radar-cart-title-time > i {
    display: inline-block;
    vertical-align: middle;
    width: .63rem;
    height: .25rem;
    background-color: rgba(255, 210, 42, .1);
    border: .02rem solid #ffa800;
    margin-left: .06rem;
    box-sizing: border-box;
  }

  .radar-cart-title {
    position: absolute;
    right: 0;
    top: 0;
    font-size: .24rem;
    font-weight: 600;
    color: #555;
    line-height: .4rem;
    text-align: right;

  }

  .item-class-type {
    text-align: center;
    line-height: .5rem;
    font-size: .3rem;
    font-weight: bolder;
    color: #f96900;
  }

  .item-class-star-right {
    right: .2rem;
  }

  .item-class-star-left {
    left: .2rem;
  }

  .item-class-star {
    position: absolute;
    top: .14rem;
    display: inline-block;
    width: .18rem;
    height: .18rem;
    background: url('../assets/img/star_o.png') no-repeat;
    background-size: 100% 100%;
  }

  .content-item-title-dark .item-title-bg {
    background-color: #ffe5d9;
    box-shadow: 0px 3px 0px -1px #ffba89;
  }

  .item-title-bg {
    width: 2.8rem;
    height: .48rem;
    border-radius: .24rem;
    background-color: #fff3cb;
    box-shadow: 0px 3px 0px -1px #f5d887;
    box-sizing: border-box;
  }

  .content-item-title {
    position: relative;
    margin: .36rem auto .36rem;
    width: 2.8rem;
    height: .5rem;
    box-sizing: border-box;
  }

  .cart-text-top {
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    margin-top: .6rem;
  }

  .cart-text-left {
    left: 0;
    top: 50%;
    margin-left: .2rem;
    transform: translate(-50%, -50%);
  }

  .cart-text-right {
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-right: -0.6rem;
  }

  .cart-text-bottom {
    left: 50%;
    bottom: 0;
    margin-bottom: -0.16rem;
    transform: translate(-50%, -50%);
  }

  .cart-text {
    position: absolute;
    color: #fff;
    font-size: .24rem;
    width: .8rem;
    height: .8rem;
    font-weight: 600;
    text-align: center;
    line-height: .8rem;
    background: url('../assets/img/rado_bg.png') no-repeat;
    background-size: 100% 100%;
  }

  .charts-inicate {
    font-family: Arial, Helvetica, Microsoft YaHei, PingFang SC;
    margin: .2rem auto 0;
    position: relative;
  }

  .radar-charts {
    margin: 0 auto;

  }

  .test-ability-box {
    position: relative;
    width: 100%;
    background: url('../assets/img/ability_bg.png') no-repeat;
    background-size: 2.26rem 1.79rem;
    padding: 1px;

  }

  .mark-avg-bg-text {
    display: block;
    font-size: .24rem;
    color: #fff;
    font-weight: 600;
    line-height: .38rem;
    text-align: center;
  }

  .mark-avg-bg-text > b {
    font-weight: normal;
    margin-left: .05rem;
  }

  .mark-avg-bg {
    position: absolute;
    top: 0;
    width: 1.4rem;
    transform: translate(-50%, 0);
    height: .4rem;
    background: url('../assets/img/svg_bg.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
  }

  .progress-mark-name {
    position: relative;
    font-size: .28rem;
    color: #333;
    line-height: .4rem;
    text-align: left;
    margin-left: .2rem;
    z-index: 10;
  }

  .progress-mark-box {
    position: relative;
    height: .4rem;
    margin-bottom: .06rem; /*动态*/
  }

  .progress-item-active-text {
    display: block;
    color: #fff;
    font-size: .2rem;
    text-align: right;
    margin-right: .14rem;
  }

  .progress-active-text-color {
    text-align: left;
    width: 1.4rem;
    margin-left: .14rem;
    color: #e02727;
  }

  .progress-item-active {
    position: absolute;
    left: 0;
    top: 0;
    /*width: 30%;*/
    height: .4rem;
    line-height: .4rem;
    background: linear-gradient(left, #ffdd00, #fd8f00);
    border-radius: 0.2rem;
  }

  .progress-total-score {
    display: block;
    font-size: .2rem;
    color: #666;
    text-align: right;
    margin-right: .14rem;
    line-height: .4rem;
  }

  .progress-item-bg {
    position: relative;
    width: 100%;
    height: .4rem;
    background-color: #ffecd3;
    border-radius: 0.2rem;
  }

  .progress-box {
    width: 100%;
    box-sizing: border-box;
  }

  .progress-wrap {
    position: relative;
    width: 100%;
  }

  .test-content-list-unit {
    margin-bottom: .3rem;
  }

  .test-content-list {
    margin: 0 auto;
    width: 86%;
  }

  .test-content-item {
    width: 100%;
    font-size: .28rem;
    font-weight: 500;
    color: #333;
    padding-bottom: .06rem;
  }

  .item-unit-total {
    font-size: .2rem;
  }

  .item-unit-recoder .item-unit-number {
    font-size: .44rem;
    line-height: .4rem;
  }

  .item-unit-text {
    font-size: .28rem;
    text-align: center;
    color: #222;
    font-weight: 500;
    margin-top: .1rem;
  }

  .content-item-unit:nth-of-type(4) .item-unit-recoder {
    background-color: #89d07b;
  }

  .content-item-unit:nth-of-type(3) .item-unit-recoder {
    background-color: #f67238;
  }

  .item-unit-avg .item-unit-number, .item-unit-score .item-unit-number {
    font-size: .44rem;
    text-align: center;
    line-height: 1.08rem;
  }

  .item-unit-avg {
    background-color: #7695dc;
  }

  .item-unit-score {
    background-color: #ea5858;
  }

  .item-unit-recoder {
    text-align: center;
    padding-top: .2rem;

  }

  .item-unit-common {
    color: #fff;
    width: 1.08rem;
    height: 1.08rem;
    border-radius: 50%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .content-item-unit {
    flex: 1;
    align-items: center;
  }

  .content-item-list {
    width: 100%;
    height: 1.48rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .test-sum-wrap {
    width: 100%;
    height: 1.96rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: .5rem;
  }

  .test-content-title {
    margin: .64rem auto .54rem;
    width: 6.47rem;
    height: .91rem;
    background: url('../assets/img/stage_unit.png') no-repeat;
    background-size: 100% 100%;
  }

  .test-content {
    padding: 0 .25rem .4rem;
    padding-top: 1px;
    width: 100%;
    background: url('../assets/img/stage_unit_bg.png') repeat;
    background-size: .22rem .22rem;
    border-radius: .12rem;
    box-shadow: 0px 1px 3px -1px #999;
    box-sizing: border-box;
  }

  .test-box-bg {
    padding: .96rem .2rem 0 .2rem;
    background: url('../assets/img/read_bg.png') no-repeat;
    background-size: 100% .5rem;
    box-sizing: border-box;

  }

  .test-box {
    width: 100%;
    padding-bottom: .7rem;
    box-sizing: border-box;
    background-color: #ffd22a;
  }

</style>
